<template>
  <div class="box-a"></div>
</template>

<script>
export default {

}
</script>

<style scoped>
.box-a{
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: myframe  1s infinite;
    animation-iteration-count: 50 infinite;
    border-radius: 50px;
}
@keyframes myframe {
    0%{
        background: red;
        top:0px;
        left: 0px;
    }
    25%{
        background: yellow;
        top:200px;
        left: 0px;
    }
    50%{
        background: blue;
        top:200px;
        left: 200px;
    }
    75%{
        background: green;
        top: 0px;
        left: 200px;
    }
    100%{
        background: red;
        top: 0px;
        left: 0px;
    }
}
</style>